<template>
  <div id="main">
    <div class="top">
      <div class="message">
        欢迎：{{ ruleForm.loginName }}，登录大鹏教育运营系统
      </div>
    </div>
    <div class="card-box">
      <!--左侧-个人资料-->
      <el-card class="userInfo" shadow="hover">
        <div slot="header" class="clearfix">
          <span>个人资料</span>
        </div>
        <div class="head-box">
          <el-avatar :size="120" :src="ruleForm.avatar"></el-avatar>
        </div>
        <div class="form-box">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="登录名称：">
              {{ ruleForm.loginName }}
            </el-form-item>
            <el-form-item label="手机号码：">
              {{ ruleForm.phonenumber }}
            </el-form-item>
            <el-form-item label="所属部门：">
              {{ ruleForm.dept.deptName }}
            </el-form-item>
            <el-form-item label="邮箱地址：">
              {{ ruleForm.email }}
            </el-form-item>
            <el-form-item label="创建时间：">
              {{ ruleForm.createTime }}
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!--右侧-时间线-->
      <el-card class="baseInfo" shadow="hover">
        <div slot="header" class="clearfix">
          <span>更新记录</span>
        </div>
        <div class="table-conBtn">
          <freshCom @searchList="toSearch('ruleForm')"></freshCom>
          <el-button
            v-permission="'wh:system:main:addLog'"
            class="add-btn"
            type="success"
            icon="el-icon-plus"
            @click="showAddEdit()"
          >
            新增
          </el-button>
        </div>
        <el-scrollbar
          ref="myScrollbar"
          wrap-class="scrollbar-wrapper"
          class="timeline-con"
          v-loading="loading"
        >
          <p v-if="tableData.length === 0 && !loading" class="no-data">
            暂无数据！
          </p>
          <div class="timeline-box" v-if="tableData.length > 0">
            <el-timeline v-for="item in tableData" :key="item.id">
              <el-timeline-item
                :timestamp="item.updateTime"
                placement="top"
                color="#f8ac59"
              >
                <el-card>
                  <div class="content">
                    <h4>
                      {{ item.title
                      }}<span v-if="item.remarks">({{ item.remarks }})</span>
                    </h4>
                    <p v-html="item.contents"></p>
                  </div>
                  <div class="btn-box">
                    <el-button
                      v-permission="'wh:system:main:editLog'"
                      type="text"
                      @click="showAddEdit(item.id)"
                    >
                      编辑
                    </el-button>
                    <el-button
                      v-permission="'wh:system:main:delLog'"
                      type="text"
                      @click="delItem(item.id)"
                    >
                      删除
                    </el-button>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-scrollbar>
      </el-card>
    </div>
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAddEdit>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getTimeLine, delUpdateLog } from '@/api/main' // 接口
import dialogAddEdit from '@component/main/dialogAddEdit' // 新增/编辑弹窗
export default {
  name: 'Main',
  msg: '首页',
  components: { dialogAddEdit },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [],
      ruleForm: {
        dept: {}
      },
      formInline: {
        // 搜索条件
        title: '', // 标题
        type: '', // 类型
        contents: '', // 内容
        remarks: '', // 备注
        updateTimeStart: '', // 开始时间
        updateTimeEnd: '', // 结束时间
        createTime: []
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 100 // 页面显示条数
      },
      dialogData: {
        isShow: false, // 默认隐藏
        id: null // 编辑时，传递的参数
      },
      powerAry: [] // 可显示的权限
    }
  },
  watch: {
    'formInline.createTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.updateTimeStart = newVal[0]
          this.formInline.updateTimeEnd = newVal[1]
        } else {
          this.formInline.updateTimeStart = ''
          this.formInline.updateTimeEnd = ''
        }
      },
      deep: true
    }
  },
  mounted() {
    this.searchList()
    // this.getPower()
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.ruleForm = { ...userInfo }
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = 2887 //正式环境、测试环境，都为2887；原来正式-2887，测试&&本地-2996
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getTimeLine(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /*显示新增/编辑弹窗*/
    showAddEdit(id = '') {
      this.dialogData.id = id
      this.dialogData.isShow = true
    },
    /*删除*/
    delItem(id) {
      this.$confirm('确定删除该条更新日志吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUpdateLog(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      })
    },
    /*新增/编辑后，刷新列表*/
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchParams.pageNum = 1
          this.searchList()
        } else {
          return false
        }
      })
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style lang="less">
#main {
  font-size: 13px;
  .search-box {
    margin-bottom: 0 !important;
  }
  .table-conBtn {
    margin-bottom: 5px !important;
    .add-btn {
      float: right;
      margin-right: 10px;
    }
  }
  .refresh-btn {
    margin-right: 0 !important;
  }
  .top {
    color: #f8ac59;
    padding: 0 15px;

    .message {
      padding: 10px 20px;
      margin: 0 0 20px;
      border-left: 5px solid #eee;
    }
  }
  .card-box {
    display: flex;
    justify-content: left;

    .el-card__header {
      padding: 12px 15px;
      background: #f0f3f4;
      border-bottom: 1px solid #eee;
    }

    .userInfo {
      width: 325px;
      flex: none;
      margin: 0 10px;
      .head-box {
        text-align: center;
        margin-bottom: 5px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .el-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }

      .el-form-item__label {
        color: #8b91a1;
      }
    }

    .baseInfo {
      position: relative;
      flex: auto;
      margin-right: 10px;
      height: calc(~'100vh - 230px');
      .timeline-con {
        height: calc(~'100% - 100px');
      }
      .timeline-box {
        padding-right: 15px;
        h4 {
          font-size: 14px;
          & + p {
            padding-top: 5px;
          }
        }
        .btn-box {
          margin-top: 8px;
        }
      }
      p.no-data {
        line-height: 80px;
        text-align: center;
        font-size: 16px;
        color: #666;
      }
      .el-timeline-item__node--normal {
        left: 0;
      }
      .el-scrollbar__wrap {
        margin-right: -17px !important;
      }
    }
    .el-card__body {
      height: calc(100% - 50px);
      /*  overflow: auto;
      overflow-x: hidden;*/
    }
  }
}
</style>
